<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 10px" gutter="10">
					<u-col span="6">
						<view class="demo-layout bg-purple-light" @click="goPage(1)">
							<image class="myimage" src="../../static/image/police.png"></image>
							<view class = "font">小区民警</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple" @click="goPage(2)">
							<image class="myimage" src="../../static/image/shop.png"></image>
							<view class = "font">周边商铺</view>
						</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" gutter="10">
					<u-col span="6">
						<view class="demo-layout bg-purple" @click="goPage(3)">
							<image class="myimage" src="../../static/image/service.png"></image>
							<view class = "font">家政服务</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout bg-purple-light" @click="goPage(4)">
							<image class="myimage" src="../../static/image/phone.png"></image>
							<view class = "font">政务电话</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			goPage(type){
				uni.navigateTo({
					url:"./helpItem?helpType="+type
				})
			}
		}
	}
</script>

<style>
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 125px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.u-page{
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
	.font {
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		font-weight: 900;
		font-size: 40rpx;
		text-align: right;
	}
	
	.myimage{
		margin-top: 10rpx;
		margin-left: 10rpx;
		height: 190rpx;
		width: 190rpx;
	}
</style>